<template>
  <div class="dn-registration-area">
    <div class="middle main-area">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="box-area search-area mg-b-20">
        <h2 class="c-d2 f-w-600 f-16">建设网站，从域名注册开始</h2>
        <div
          class="placeholder-area c-g f-14"
          v-html="focus || dnText != '' ? '' : placeholder"
        ></div>
        <div class="limit-number c-g f-14">
          <span class="c-o">{{ dnNumber }}</span
          >/500
        </div>
        <Input
          v-model="dnText"
          wrap="hard"
          class="input-area"
          type="textarea"
          maxlength="500"
          :autosize="{ minRows: 10, maxRows: 10 }"
          @on-focus="focus = true"
          @on-keyup="getDNNumber"
          @on-blur="getAvailableDN"
        />
        <div class="select-area flx-row-s-c">
          <div
            :class="{ select: item.isSelect }"
            v-for="(item, index) in selectList"
            :key="'s' + index"
            @click="selectItem(index)"
          >
            {{ item.suffix }}
          </div>
        </div>
        <div
          class="user-strong-button normal-button-size"
          style="width: 100px; margin: 21px auto 0"
          @click="search"
        >
          查询
        </div>
      </div>
      <div class="box-area mg-b-20" style="padding-bottom: 20px">
        <div class="flx-row-bw-c tabbar-area mg-b-20">
          <div
            class="flx-col-s-c tab-item"
            v-for="(item, index) in tabbar"
            :key="index"
            :class="{ active: tabSelect == index }"
            @click="changeTab(index)"
          >
            <h2>{{ item.name }}</h2>
            <span>{{ item.content }}</span>
            <div class="line"></div>
          </div>
        </div>
        <div style="position: relative">
          <Spin :withIcon="true" v-if="listLoading"></Spin>
          <table class="table-area" v-if="priceList[tabSelect].get">
            <thead>
              <tr>
                <th><div class="line-style"></div></th>
                <th><div class="line-style">域名后缀</div></th>
                <th
                  v-for="(item, index) in priceList[tabSelect].list[0]
                    .suffixPriceList"
                  :key="'title' + index"
                >
                  <div class="line-style">{{ item.levelName }}</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item, index) in priceList[tabSelect].list"
                :key="index"
                :class="[(index + 1) % 2 != 0 ? 'lc-f' : 'lc-F9FAFB']"
              >
                <td>
                  <div class="line-style">
                    <span class="normal-f">{{ item.name }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="normal-f f-ell-sin">{{ item.remark }}</span>
                  </div>
                </td>
                <td
                  v-for="(innerItem, innerKey) in item.suffixPriceList"
                  :key="'inner' + innerKey"
                >
                  <div class="line-style">
                    <span class="normal-f">{{
                      innerItem.activityPrice != null
                        ? innerItem.activityPrice
                        : innerItem.price
                        ? innerItem.price
                        : "-"
                    }}</span>
                    <span
                      class="c-g"
                      style="text-decoration: line-through; margin-left: 10px"
                      v-if="
                        innerItem.activityPrice != null &&
                        innerItem.price > innerItem.activityPrice
                      "
                      >{{ innerItem.price }}</span
                    >
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="box-area bottom-tip-area">
        <p class="c-o f-14 mg-b-20">注意事项：</p>
        <p class="c-g f-14">
          1、注册域名请先阅读：<span
            class="b-form-font-button"
            @click="ruleModelShow = true"
            >《{{ ruleTitle }}》</span
          >
        </p>
        <p class="c-g f-14">
          2、CN域名注册后要经过CNNIC审核，如果审核不通过，则域名注册会被退回。
        </p>
      </div>
    </div>
    <rule-modal
      :show.sync="ruleModelShow"
      :content="ruleContent"
      :title="ruleTitle"
    ></rule-modal>
  </div>
</template>

<script>
import { debounce, trimStr } from "@/utils/format";
import { domainSuffix } from "@/utils/publicData";
import { getDnPrice } from "@/api/data";
import axios from "axios";
const bottomInfoUrl =
  process.env.NODE_ENV === "development"
    ? config2.bottomInfoUrl.dev
    : config2.bottomInfoUrl.pro;
export default {
  name: "VipDnregistration",
  components: {
    ruleModal: () => import("_c/modal/ruleModal/ruleModal.vue"),
  },
  data() {
    return {
      ruleModelShow: false,
      ruleContent: "",
      ruleTitle: "",
      listLoading: true,
      breadCrumb: [{ name: "域名注册", to: "/dnre" }],
      placeholder:
        "请输入域名，每行一个域名；<br/>支持字符为英文、数字、中文、“-”；<br/>“-”不能出现在域名首尾，且不能连续出现；<br/>如输入后缀将被自动忽悠；<br/>每次最多支持500个，多出部分将被忽略；",
      selectList: [],

      // 表单数据
      focus: false,
      dnText: "",
      dnNumber: 0,
      dnSet: new Set(),

      tabbar: [
        {
          name: "域名注册",
          content: "首年注册",
        },
        {
          name: "续费价格",
          content: "单年续费价格",
        },
        {
          name: "转入价格",
          content: "含一年续费价格",
        },
        {
          name: "域名赎回",
          content: "含一年续费价格",
        },
      ],
      tabSelect: 0,

      priceList: [
        {
          get: false,
          list: [],
        },
        {
          get: false,
          list: [],
        },
        {
          get: false,
          list: [],
        },
        {
          get: false,
          list: [],
        },
      ],
    };
  },
  created() {
    this.getDomainSuffix();
    this.getDnPrice(0);
    this.getRule();
  },
  methods: {
    // 获取协议
    getRule() {
      axios(`${bottomInfoUrl}/domainNameRegisterRules.json`).then((res) => {
        if (res != null && res.data != null) {
          this.ruleTitle = res.data.title;
          this.ruleContent = res.data.content;
        }
      });
    },
    selectItem(index) {
      let select = this.selectList[index].isSelect;
      this.selectList[index].isSelect = !select;
    },
    // 查询
    search() {
      let list = [...this.dnSet];
      let suffix = this.selectList.filter((item) => item.isSelect == 1);
      if (list.length <= 0) {
        this.$Message.warning("请至少输入一个域名");
        return;
      }
      if (suffix.length <= 0) {
        this.$Message.warning("请至少输入一个域名后缀");
        return;
      }
      this.$router.push({
        name: "dnsearchresult",
        params: {
          dnList: list,
          suffixList: this.selectList,
          suffixSelect: suffix,
        },
      });
    },
    // 获取域名后缀
    async getDomainSuffix() {
      let res = await domainSuffix();
      this.selectList = res;
    },
    // 函数防抖获取输入框中的域名
    getDNNumber: debounce(function () {
      let temp = this.dnText.split("\n");
      this.dnNumber = temp.filter((item) => {
        return !item.match(/^[ ]*$/);
      }).length;
    }, 200),
    // 筛选出有用域名
    getAvailableDN() {
      this.focus = false;
      let temp = this.dnText.split("\n").filter((item) => {
        return !item.match(/^[ ]*$/);
      });
      let dnList = temp.map((item) => trimStr(item));
      this.dnSet = new Set(dnList);
      this.dnText = [...this.dnSet].join("\n");
      this.dnNumber = this.dnSet.size;
    },
    // 获取域名价格
    async getDnPrice(type) {
      if (this.priceList[type].get) return;
      this.listLoading = true;
      let res = await getDnPrice(type);
      if (res.code == 200) {
        this.priceList[type].list = res.data;
        this.priceList[type].get = true;
      }
      this.listLoading = false;
    },
    // 切换tab
    changeTab(index) {
      if (this.tabSelect == index) return;
      this.tabSelect = index;
      this.getDnPrice(index);
    },
  },
};
</script>

<style lang="scss" scoped>
.dn-registration-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .box-area {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
  }
  .search-area {
    padding: 30px;
    position: relative;
    h2 {
      text-align: center;
      margin-bottom: 15px;
    }
    .placeholder-area {
      @include size(100%, 220px);
      padding: 20px;
    }
    .input-area {
      position: absolute;
      left: 30px;
      top: 69px;
      width: 1140px;
      background: none !important;
    }
    .limit-number {
      background-color: #fff;
      position: absolute;
      right: 55px;
      top: 240px;
      z-index: 2;
    }
  }
  .select-area {
    margin-top: 20px;
    flex-wrap: wrap;

    div {
      width: 106px;
      height: 30px;
      font-size: 14px;
      color: #3d3d3d;
      background-color: #efefef;
      border: 2px solid transparent;
      text-align: center;
      line-height: 26px;
      transition: background-image 0.3s, border-color 0.3s,
        background-color 0.3s;
      cursor: pointer;
      margin-bottom: 9px;
      margin-right: 4px;
      margin-left: 4px;

      &:hover {
        border-color: #fa6335;
        background-color: #fff;
      }

      &.select {
        border-color: #fa6335;
        background-color: #fff;
        @include bg-setting("select", 18px 18px, right bottom);
      }
    }
  }
  .mg-b-20 {
    margin-bottom: 20px;
  }
  .tabbar-area {
    border-bottom: 1px solid #eaeaea;

    .tab-item {
      width: 33.3%;
      color: #737373;
      padding-top: 15px;
      transition: color 0.3s;
      cursor: pointer;

      h2 {
        font-size: 18px;
        font-weight: 600;
      }
      span {
        font-size: 14px;
      }
      .line {
        height: 2px;
        margin-top: 15px;
        width: 110px;
        background-color: #fff;
        transition: background-color 0.3s;
      }

      &:hover,
      &.active {
        color: #f9521f !important;
      }
      &.active {
        .line {
          background-color: #f9521f;
        }
      }
    }
  }
  .bottom-tip-area {
    padding: 24px 60px 30px;
  }
}
</style>
